<!--  -->
<template>
  <div class="box">
    <div>
      <el-button
        type="primary"
        class="addshop"
        @click="addOpen()"
      >
        新增商品
      </el-button>
      <div class="search">
        <span>商品搜索:
          <el-input
            v-model="input"
            placeholder="请输入商品名称、关键字、商品Id"
            @change="inputchange"
          />
        </span>
      </div>
      <div class="show">
        <span>砍价状态：</span>
        <el-select
          v-model="value"
          placeholder="全部"
          @change="changeStatus"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-table
        :data="isShow === null ? tableData : isShow ? showDataT : showDataF"
        style="width: 100%"
        max-height="100%"
      >
        <el-table-column
          fixed
          prop="id"
          label="ID"
        />
        <el-table-column
          prop="img"
          label="商品图片"
        >
          <template slot-scope="scope">
            <el-image :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="砍价名称"
        />
        <el-table-column
          prop="newprice"
          label="砍价价格"
        />
        <el-table-column
          prop="oldprice"
          label="最低价"
        />
        <el-table-column
          prop="num"
          label="参与人数"
        />
        <el-table-column
          prop="num1"
          label="帮忙砍价人数"
        />
        <el-table-column
          prop="num2"
          label="砍价成功人数"
        />
        <el-table-column
          prop="num3"
          label="限量"
        />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.stateFlag" />
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form-item
        label="ID"
        prop="id"
      >
        <el-input
          v-model="ruleForm.id"
          style="width: auto"
        />
      </el-form-item>
      <el-form-item
        label="砍价名称"
        prop="name"
      >
        <el-input
          v-model="ruleForm.name"
          style="width: auto"
        />
      </el-form-item>
      <el-form-item
        label="砍价价格"
        prop="newprice"
      >
        <el-input
          v-model="ruleForm.newprice"
          style="width: auto"
        />
      </el-form-item>

      <el-steps
        :active="active"
        style="width: 100%"
        finish-status="success"
      >
        <el-step title="选择砍价商品" />
        <el-step title="填写基础信息" />
        <el-step title="修改商品详情" />
      </el-steps>

      <component
        :is="changeName"
        ref="activeComponent"
      />
      <div class="theform">
        <span>选择商品</span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
      </div>
      <div class="addshop_bottom">
        <el-button
          v-if="active > 1"
          style="margin-top: 12px"
          type="primary"
          @click="prevFn()"
        >
          上一步
        </el-button>
        <el-button
          style="margin-top: 12px"
          type="primary"
          @click="next()"
        >
          下一步
        </el-button>
        <el-button
          style="margin-top: 12px"
          type="primary"
          @click="submite()"
        >
          提交
        </el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
import axios from "axios";
import Thefrom from "../bargainShop/children/Theform";
import Theword from "../bargainShop/children/Theword";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Thefrom,
    Theword
  },
  data() {
    //这里存放数据
    return {
      active: 1,
      input: "",
      changeName: "Theform",
      radio: "1",
      num11: 0,
      num12: 0,
      num13: 0,
      num14: 0,
      obj: {},
      use: "",
      tableData: [],
      newList: [],
      imageUrl: "",
      dialogVisible: false,
      options: [
        {
          value: "all",
          label: "全部"
        },
        {
          value: "show",
          label: "显示"
        },
        {
          value: "isShow",
          label: "不显示"
        }
      ],
      value: "",
      ruleForm: {
        name: "",
        id: "",
        newprice: ""
      },

      rules: {
        id: [
          { required: true, message: "id不能为空", trigger: "blur" },
          {
            min: 1,
            max: 18,
            message: "长度在 18 到 18 个字符",
            trigger: "blur"
          }
        ],
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { min: 2, max: 3, message: "长度在 2 到 3 个字符", trigger: "blur" }
        ],
        newprice: [
          { required: true, message: "价格不能为空", trigger: "blur" },
          { min: 1, max: 2, message: "长度在 2 到 2 个字符", trigger: "blur" }
        ]
      },
      option: "",
      isShow: null,
      showDataT: [],
      showDataF: [],
      pageIndex: 1, //第一页
      pageSize: 5, //每页显示个数
      total: 0 //总数
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    axios({
      url: "/getKshop",
      method: "post",
      data: {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }
    }).then(res => {
      console.log(res.data);
      this.tableData = res.data.data;
      this.total = res.data.total;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //状态选择
    changeStatus(value) {
      if (value === "show") {
        this.isShow = true;
        this.showDataT = this.tableData.filter(item => {
          return item.stateFlag === true;
        });
      } else if (value === "isShow") {
        this.isShow = false;
        this.showDataF = this.tableData.filter(item => {
          return item.stateFlag === false;
        });
      } else if (value === "all") {
        this.isShow = null;
        // this.tableData = this.tableData;
      }
    },
    //下一步
    prevFn() {
      switch (this.active) {
        case 3:
          this.active = 2;
          this.changeName = "Theword";
          break;
        case 2:
          this.active = 1;
          this.changeName = "Thefrom";
          break;
      }
    },

    //上一步
    next() {
      switch (this.active) {
        case 2:
          this.active += 1;
          this.changeName = "Thefrom";
          break;
        case 1:
          this.active += 1;
          this.changeName = "Theword";
          break;
      }
    },
    //提交
    submite() {
      this.dialogVisible = false;
    },

    submitForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate(valid => {
          if (valid) {
            resolve("submit!");
          } else {
            reject("error submit!!");
            return false;
          }
        });
      });
    },
    handleChange() {
      console.log("value");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //新增
    sureAddBtn(ruleForm) {
      this.use = "add";
      this.dialogVisible = true;
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          let info = {};
          info.id = this.ruleForm.id;
          info.name = this.ruleForm.scope;
          info.name = this.ruleForm.name;
          this.tableData.push(info);
          //清空新增
          this.ruleForm = {
            name: "",
            id: "",
            newprice: "",
            type: []
          };
          this.dialogVisible = false;
          console.log(this.ruleForm);

          if (this.use === "set") {
            this.tableData.forEach(item => {
              if (item.id === this.ruleForm.id) item = this.ruleForm;
            });
          } else if (this.use === "add") {
            console.log("a");
          }
        } else {
          return false;
        }
      });
    },
    //点击添加按钮弹出弹框
    addOpen() {
      this.dialogVisible = true;
    },
    //编辑
    handleClick(row) {
      this.use = "set";
      this.ruleForm = row;
      this.dialogVisible = true;
      console.log(row);
    },
    inputchange(e) {
      console.log(e);
      this.tableData = this.tableData.filter(item => {
        return item.name.includes(e) || item.id === e;
      });
    },
    //分页
    currentChange(value) {
      this.pageIndex = value;
      axios({
        url: "/getKshop",
        method: "post",
        data: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      }).then(res => {
        console.log(res.data.data);
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.addshop {
  margin: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #ccc;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.theformss {
  display: flex;
  margin-top: 20px;
  align-items: center;
  b {
    font-size: 30px;
    border: 1px dashed;
    padding: 30px 40px;
    margin-left: 30px;
  }
}
.search .el-input {
  width: 200px;
}
</style>
